<template>
  <div :class="['playPage',{paused:paused}]">
    <audio
      v-if="playMusice"
      autoplay
      :src="`https://music.163.com/song/media/outer/url?id=${playMusice.id}.mp3`"
      @timeupdate="timeupdate"
      @play="play"
      @pause="pause"
      @ended="playEnd"
      ref="player"
    ></audio>
    <div
      class="miniBar"
      v-if="playMusice"
    >
      <img :src="playMusice.picUrl" />

      <p @click="isFull=true">{{playMusice.name}} - {{playMusice.artists[0].name}}</p>

      <div>
        <canvas
          width="50"
          @click="togglePlay"
          ref="miniPlay"
        ></canvas>
        <span class="btn">

        </span>
      </div>
    </div>
    <div
      class="fullScreen"
      v-if="isFull"
    >
      <p @click="isFull=false">
        <!-- <span>返回</span> -->
        <span></span>
      </p>
      <h2>{{playMusice.name}}</h2>
      <div class="center" >
        <img
          :src="playMusice.picUrl"
          v-show="centerShow"
          @click="centerShow=false"
        />
      </div>
      <div
        class="lyric"
        v-show="!centerShow"
        @click="centerShow=true"
      >

        <ul :style="{transform: `translateY(${liTop}px`}">
          <li v-show="lyric.length==0">歌词未找到</li>
          <li
            v-for="(ly,index) in lyric"
            :key="index"
            ref="lyricLi"
            :class="{lyricLight:index==lyricIndex}"
          >{{ly.lyric}}</li>
        </ul>
      </div>
      <div class="control">
        <input
          type="range"
          max="100"
          class="range"
          v-model="timeRange"
          @change="changeTime"
        />
        <div class="btns">

          <div class="how">
            <div
              @click="playMode='circle'"
              v-show="playMode=='list'"
            > 列表循环</div>
            <div
              @click="playMode='list'"
              v-show="playMode=='rand'"
            >  随机播放</div>
            <div
              @click="playMode='rand'"
              v-show="playMode=='circle'"
            >单曲循环</div>
          </div>

          <div @click="prevMusic"><svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 25 25"
              style="transform: scaleX(-1);"
            >
              <path
                fill-rule="evenodd"
                d="M1,18.21V6.15A.77.77,0,0,1,2.19,5.5l10.76,6a.74.74,0,0,1,0,1.31c-.58.33-10.09,5.66-10.78,6A.77.77,0,0,1,1,18.21Zm11.65,0V6.15a.77.77,0,0,1,1.19-.65c.48.26,10,5.56,10.76,6a.74.74,0,0,1,0,1.31c-.58.33-10.09,5.66-10.78,6A.77.77,0,0,1,12.65,18.21Z"
              ></path>
            </svg></div>
          <div @click="togglePlay">
            <svg
              v-show="paused"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 25 25"
            >
              <path
                fill-rule="evenodd"
                d="M3,22.81V3.32a1.25,1.25,0,0,1,1.92-1c.77.42,16.08,9,17.39,9.73a1.2,1.2,0,0,1,0,2.11c-.94.53-16.31,9.15-17.43,9.75A1.25,1.25,0,0,1,3,22.81Z"
              ></path>
            </svg>

            <svg
              v-show="!paused"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 25 25"
            >
              <path
                fill-rule="evenodd"
                d="M7,2.1h2.8c0.4,0,0.7,0.3,0.7,0.7v20.5c0,0.4-0.3,0.7-0.7,0.7H7c-0.4,0-0.7-0.3-0.7-0.7V2.8 C6.3,2.4,6.6,2.1,7,2.1z M15.1,2.3 M15.1,2.8v20.5c0,0.4,0.3,0.7,0.7,0.7h2.8c0.4,0,0.7-0.3,0.7-0.7V2.8c0-0.4-0.3-0.7-0.7-0.7h-2.8 C15.4,2.1,15.1,2.4,15.1,2.8z"
              ></path>
            </svg>
          </div>

          <div @click="nextMusic"><svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 25 25"
            >
              <path
                fill-rule="evenodd"
                d="M1,18.21V6.15A.77.77,0,0,1,2.19,5.5l10.76,6a.74.74,0,0,1,0,1.31c-.58.33-10.09,5.66-10.78,6A.77.77,0,0,1,1,18.21Zm11.65,0V6.15a.77.77,0,0,1,1.19-.65c.48.26,10,5.56,10.76,6a.74.74,0,0,1,0,1.31c-.58.33-10.09,5.66-10.78,6A.77.77,0,0,1,12.65,18.21Z"
              ></path>
            </svg></div>
          <div
            class="list"
            @click="showList=!showList"
          >
            <!-- <router-link
              tag="span"
              :to="{name:'PlayList',params:{musicList:musicList,playMusice:playMusice}}"
            >播放列表</router-link> -->

            <span>播放列表</span>
          </div>
        </div>

      </div>
 
      <transition
        enter-active-class="animate__animated  animate__backInDown"
        leave-active-class="animate__animated  animate__backOutDown"
      >
        <PlayList
          @play="$emit('play',$event)"
          :musicList="musicList"
          :playMusice="playMusice"
          v-show="showList"
          
        ></PlayList>
      </transition>

    </div>

  </div>
</template>
<script>
import PlayList from "@/components/PlayList";
export default {
  name: "Play",
  props: {
    // musicID: {
    //   type: Number,
    //   default: null,
    // },
    playMusice: {
      type: Object,
      default: function () {
        return null;
      },
    },

    musicList: Array,
  },
  components: {
    PlayList,
  },
  watch: {
    playMusice(value) {
      this.lyric = [];

      this.$http
        .get("http://music.kele8.cn/lyric", {
          params: { id: value.id },
        })
        .then((d) => {
          // console.log(d)
          if(d.data.lrc&&d.data.lrc.lyric){
          let lyric = d.data.lrc.lyric;
          let lyricArray = lyric.split("\n");
          lyricArray.pop();
          let reg = /\[(\d+):(\d+\.\d+)\](.*)/;
          for (let i = 0; i < lyricArray.length; i++) {
            let regex = new RegExp(reg);
            if (regex.test(lyricArray[i])) {
              let item = {
                time: parseInt(RegExp.$1) * 60 + parseFloat(RegExp.$2),
                lyric: RegExp.$3,
              };
              this.lyric.push(item);
            }}
          }else{
            this.lyric=[]
          }
        });
    },
  },
  data() {
    return {
      paused: false,
      isFull: false,
      lyric: [],
      timeRange: 0,
      duration: 0,
      playMode: "circle",
      showList: false,
      centerShow: true,
      lyricIndex: 0,
      liTop: 220,
    };
  },
  methods: {
    playEnd() {
      if (this.playMode == "circle") {
        this.$refs.player.play();
      } else if (this.playMode == "rand") {
        let randIndex = Math.floor(Math.random() * this.musicList.length);
        let randMusic = this.musicList[randIndex];
        this.$emit("play", randMusic);
      } else {
        this.nextMusic();
      }
    },
    prevMusic() {
      let playID = this.playMusice.id;
      let prevMusic = null;
      this.musicList.filter((d, index) => {
        if (d.id == playID) {
          let i = --index;
          if (i < 0) i = this.musicList.length - 1;
          prevMusic = this.musicList[i];
        }
      });
      this.$emit("play", prevMusic);
    },
    nextMusic() {
      let playID = this.playMusice.id;
      let nextMusic = null;
      this.musicList.filter((d, index) => {
        if (d.id == playID) {
          let i = ++index;
          if (i > this.musicList.length - 1) i = 0;
          nextMusic = this.musicList[i];
        }
      });
      this.$emit("play", nextMusic);
    },
    pause() {
      this.paused = true;
    },
    play() {
      this.paused = false;
    },
    togglePlay() {
      let player = this.$refs.player;
      if (this.paused) {
        player.play();
      } else {
        player.pause();
      }
    },
    changeTime(e) {
      let val = e.target.value;
      let player = this.$refs.player;
      // console.log(e.target.value,player.currentTime)
      let ctime = (val / 100) * this.duration;

    player.currentTime = ctime.toFixed(0);
      // console.log(player.currentTime)
    },
    timeupdate(e) {
      let audio = e.target;
      let currentTime = audio.currentTime;
      let duration = audio.duration;
      this.duration = duration;
      this.drawCircle(currentTime, duration);
      this.timeRange = (currentTime / duration) * 100;
      // console.log(1)

      // let time = e.target.currentTime;
      let lyricLi = this.$refs.lyricLi;
      // console.log(lyricLi)
      if(lyricLi&&lyricLi.length!=0){
      for (var i = 0; i < this.lyric.length; i++) {
        if (i == this.lyric.length - 1) {
          this.lyricIndex = i;
          break;
        }
        if (this.timeRange >= this.lyric[i].time && this.timeRange < this.lyric[i + 1].time) {
          this.lyricIndex = i;
  if(lyricLi){

      this.liTop = -lyricLi[i].offsetTop+220;
  }
          break;
        }}
      }else{
        return
      }
    },


    drawCircle(currentTime, duration) {
      let canvas = this.$refs.miniPlay;
      if (canvas) {
        let context = canvas.getContext("2d");
        context.clearRect(0, 0, 50, 50);

        context.beginPath();
        context.strokeStyle = "rgba(255,255,255,0.5)";
        context.lineWidth = 5;
        context.arc(25, 25, 20, 0, 2 * Math.PI);
        context.stroke();
        context.closePath();

        let arcP = (currentTime / duration) * 2 * Math.PI;

        context.beginPath();
        context.strokeStyle = "rgba(221, 0, 27,1)";
        context.lineWidth = 5;
        context.arc(25, 25, 22, 0, arcP);
        context.stroke();
        context.closePath();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.playPage {
  .miniBar {
    display: flex;
    position: fixed;
    width: 100%;
    bottom: 0;
    font-size: 14px;
    z-index: 8;
    height: 60px;
    // background-color:#a3a8a4;
    background-color: white;
    align-items: center;
    justify-content: space-between;
    img {
      margin-left: 10px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      animation: randImg 5s linear 0s infinite;
    }
    p {
      text-align: center;
      width: 60%;

      display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
      overflow: hidden;
      height: 100%;
      line-height: 60px;
    }
    div {
      background: url(../assets/pic/pause.png) no-repeat;
      background-size: cover;
      width: 50px;
      height: 50px;
      position: relative;
      .btn::after {
        width: 50px;
        height: 50px;
        left: 0;
        line-height: 50px;
        text-align: center;
        top: 0;
        // content: '暂停';
        position: absolute;
      }
    }
  }
  .fullScreen {
    position: fixed;
    width: 100vw;
    height: 100vh;
    bottom: 0;
    background: url(../assets/pic/boli.png) no-repeat;
    background-size: cover;
    z-index: 9;
    text-align: center;
    h2 {
      margin-top: 20px;
    }
    p {
      text-align: left;
      height: 5vh;
      line-height: 5vh;
      span {
        display: block;
        height: 100%;
        margin-left: 25px;
        padding-top: 10px;
      }
      span:after {
        content: "";
        display: block;
        width: 1em;
        height: 1em;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        transform: rotate(-45deg);
      }
    }
    div {
      img {
        width: 300px;
        margin: 0 auto;
        margin-top: 50px;
        border-radius: 50%;
        animation: randImg 5s linear 0s infinite;
      }
    }
    .lyric {
      height: 65vh;
      overflow: hidden;
      padding: 0 30px;
      // margin-top: calc(50%-35vh);
      ul {
        // transform: translateY(10px);
  transition: 2s;
        li {
          line-height: 40px;
          &.lyricLight {
            color: red;
            font-weight: bold;
          }
        }
      }
    }
    .control {
      position: absolute;
      bottom: 0;
      left: calc(50%-47vw);
      height: 17vh;
      input[type="range"] {
        width: 95vw;
        background-color: #303030;
        height: 5px;
        border-radius: 20px;
        -webkit-appearance: none;

        &::-webkit-slider-thumb {
          -webkit-appearance: none;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #c6c9ce;
          box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);
          cursor: pointer;
          border: 0;
        }
      }
      .btns {
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        div {
          width: 30px;
          height: 100%;
        }
        .how {
          width: 80px;

          border-radius: 15px;
          background-color: #000000;
          color: #a9aeaa;
          height: 30px;
          line-height: 30px;

          div {
            width: 100%;
          }
        }
        .list {
          width: 80px;
      

          border-radius: 15px;

          border: 1px solid #000000;
          height: 30px;
          line-height: 30px;
        }
      }
    }

  }
}

.paused {
  // color: red;
  .miniBar {
    img {
      animation-play-state: paused;
    }
    div {
      background: url(../assets/pic/play.png) no-repeat;
      background-size: cover;

      .btn::after {
        // content: '播放';
      }
    }
  }
  .fullScreen {
    div {
      img {
        animation-play-state: paused;
      }
    }
  }
}
@keyframes randImg {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>